<template>
  <div class="my">
    <div class="head">
      <div class="top">
        <img src="../assets/user1.png" alt="" @click="toSet" />
      </div>
      <div class="user">
        <img src="../assets/user.png" alt="" />
        <button style="font-size: 20px" v-if="!obj.token" @click="toLogin">
          登录/注册
        </button>
        <span
          v-if="obj.token"
          style="
            color: #fff;
            font-size: 24px;
            display: flex;
            text-align: center;
            margin-left: 30%;
          "
          @click="toLogin"
        >
          {{ obj.moblie }}</span
        >
      </div>
    </div>
    <div class="top-a">
      <div style="border-right: 1px solid #ccc" @click="toOrder">
        <img src="../assets/che.png" alt="" />
        <p>我的订单</p>
        <p style="color: #ccc">买课发快递</p>
      </div>
      <div style="border-right: 1px solid #ccc" @click="toCourse">
        <img src="../assets/课程.png" alt="" />
        <p>兑换课程</p>
        <p style="color: #ccc">兑换码兑换课程</p>
      </div>
      <div @click="toLocation">
        <img src="../assets/地址.png" alt="" />
        <p>地址管理</p>
        <p style="color: #ccc">收货地址</p>
      </div>
    </div>
    <ul class="ul">
      <li class="li" @click="toCollect">
        <div>
          <img src="../assets/星星.png" alt="" />
          我的收藏
        </div>
        <span class="sp">
          <van-icon name="arrow" />
        </span>
      </li>
      <li class="li" @click="toVip">
        <div>
          <img src="../assets/砖石.png" alt="" />
          我的会员
        </div>
        <span class="sp">
          <van-icon name="arrow" />
        </span>
      </li>
      <li class="li" style="border-bottom: 10px solid #eee" @click="toYhq">
        <div>
          <img src="../assets/优惠券.png" alt="" />
          我的优惠券
        </div>
        <span class="sp">
          <van-icon name="arrow" />
        </span>
      </li>
      <li class="li" @click="toMessage">
        <div>
          <img src="../assets/铃铛.png" alt="" />
          我的消息
        </div>
        <span class="sp">
          <van-icon name="arrow" />
        </span>
      </li>
      <li class="li" @click="toMatter">
        <div>
          <img src="../assets/记事本.png" alt="" />
          问题反馈
        </div>
        <span class="sp">
          <van-icon name="arrow" />
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

let obj = reactive({
  token: localStorage.getItem("token"),
  moblie: localStorage.getItem("moblie"),
});
const router = useRouter();
const toLogin = () => {
  router.push("/login");
  if (localStorage.getItem("token")) {
  }
  console.log(111);
};
// 去设置
const toSet = () => {
  router.push("/set");
};
// 去我的订单
const toOrder = () => {
  router.push("/myOrder");
};
// 去 我的课程
const toCourse = () => {
  router.push("./myCourse");
};
// 去 我的地址管理
const toLocation = () => {
  router.push("./myLocation");
};
// 去 我的收藏
const toCollect = () => {
  router.push("./myCollect");
};
// 去 我的会员
const toVip = () => {
  router.push("./myVip");
};
// 去 我的优惠券
const toYhq = () => {
  router.push("./myYhq");
};
// qu 消息通知
const toMessage = () => {
  router.push("./myMessage");
};
// 去 问题反馈
const toMatter=()=>{

  router.push('./myMatter')
}
</script>
<style lang="scss" scoped>
.my {
  font-size: 15px;
}
.ul {
  // padding: 10px;
  .li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    padding: 20px;
    div {
      img {
        padding-left: 10px;
        padding-right: 10px;
        vertical-align: bottom;
        width: 50px;
        height: 50px;
      }
      .sp {
        padding-right: 20px;
        font-size: 18px;
        color: #ccc;
      }
    }
  }
}
.top-a {
  display: flex;
  font-size: 15px;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 20px solid #eee;
  div {
    padding: 20px;
  }
  p {
    padding: 0;
    margin: 0;
  }
  img {
    width: 60px;
    height: 60px;
  }
}
.head {
  background-image: url(../assets/user_bg.png);
  width: 100%;
  height: 400px;
  border-radius: 0px 0px 40px 40px;
  background-repeat: no-repeat;
  position: relative;
  background-size: contain;
}
.top {
  position: absolute;
  right: 40px;
  top: 40px;
  img {
    width: 60px;
    height: 60px;
    text-align: right;
  }
}
.user {
  padding-top: 100px;
  text-align: center;

  //   align-items: center;
  //   flex-wrap: wrap;
  img {
    width: 150px;
    height: 150px;
  }
  button {
    display: block;
    padding-left: 38%;
    // display: flex;
    align-items: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
    border: 0;
    font-size: 18px;
  }
}
</style>